<template>
    <van-form @submit="onSubmit" ref="form" @failed="checkFail">
      <van-field
        v-model="form.phone"
        name="phone"   
        label="手机号码"
        placeholder="手机号码"   
        :rules="[  
        { required: true, message: '请填写手机号码' },
        {
            pattern:reg.phone,
            message:'请输入有效的手机号码',
          }
        ]"
      />
      <van-field
        v-model="form.captcha"
        name="captcha"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="[
        { required: true, message: '请填写短信验证码' },
        {
            pattern:/^\d{4}$/,
            message:'请输入4位的验证码',
          }
        ]"
      >
        <template #button>
          <van-button v-if="flag" size="small" type="primary" :disabled="phoneflag"  @click="sendCaptcha">发送验证码</van-button>
          <van-button v-else size="small" type="default" :disabled="false" >剩余 {{count }} 秒</van-button>
        </template>
      </van-field>
      <div  style="margin: 0.5rem;">
          <p class="links">
              <router-link class="aitem " :to="{name:'register'}">没有账号,立即注册</router-link>
              <router-link class="aitem forget"  :to="{name:'forgetpass'}">忘记密码</router-link>
          </p>
      </div>
      <div style="margin: 0.5rem;">
        <van-button round block type="primary"    native-type="submit" >登录</van-button>
      </div>
    </van-form>
</template>

<script>
var timer = null
export default {
  data(){
    return {
      form:{

      },
      flag:true,  
      count:120,

    }
  },
  computed:{
    phoneflag(){
      return !this.reg.phone.test(this.form.phone)
    }
  },
  methods:{
    checkFail(){
        this.$notify({
            message: '请输入有效的登录信息',
            color: '#ad0000',
            background: '#ffe1e1',
        });
    },  
    onSubmit(value){
       // 这个手机号码是否注册 
         this.$ajax.finduser({
           phone:this.form.phone,
         })
         .then(data=>{   // 当前用户信息 
           if(data.length>0){
            // 校验验证码是否正确
            this.$ajax.verifyCaptcha({
                 phone:this.form.phone,
                captcha:value.captcha
            })
            .then(res=>{
              console.log(res);
                if(res.code==200){
                    this.$notify({
                      type: 'success',
                      message:"登录成功"
                  });
                  this.changeUserInfo(data[0])
                  localStorage.setItem("phone",value.phone);
                  this.$nextTick(()=>{
                    if(this.$route.query.from){
                      this.$router.push({name:'mine'})
                    }else{
                      this.$router.go(-1); // 区分 
                    }
                  })
                }else{
                  this.$toast("验证码校验失败")
                }
            })
           }else{
             this.$notify({
                  message: '手机号不存在',
                  color: '#ad0000',
                  background: '#ffe1e1',
              });
           }
         })
    },
    sendCaptcha(){
        // 防抖  
       this.getDataAction();
       this.flag = false;
       timer = setInterval(()=>{
          if(this.count>0){
              this.count--;
          }else{
            clearInterval(timer);
            timer = null;
            this.flag = true;
            this.count = 120;
          }
       },1000)
    },
    getDataAction(){
         // 这个手机号码是否注册 
         this.$ajax.finduser({
           phone:this.form.phone,
         })
         .then(res=>{
           if(res.length>0){
            //  手机号存在再去发送 
            this.$ajax.sendCaptcha({
                 phone:this.form.phone,
            })
            .then(res=>{
              console.log(res);
              if(res.code==200){
                this.$toast("验证码发送成功")
              }else{
                this.$toast("验证码发送失败")
              }
            })
           }else{
             this.$notify({
                  message: '手机号不存在',
                  color: '#ad0000',
                  background: '#ffe1e1',
              });
           }
         })
    }
  }
}
</script> 

<style lang="scss" scoped>
.links{
  display: flex;
  justify-content: space-between;
}
.aitem{
  text-decoration: none;
  color:brown;
}
.forget{
  color:yellowgreen;
  text-align: right;
}
</style>

  